<template>
	<view class="content">
		<view class="top">
			距离本轮结束还有：
			<text style="font-weight: bold;">{{ offtime.h }}时{{ offtime.m }}分{{ offtime.s }}秒</text>
		</view>
		<view class="limtlist" style="margin-top: 32rpx;">
			<image src="../../static/images/noshuju.png" class="no-data" v-show="noshuju"></image>
			<view class="limt-item" v-for="(item, index) in goodslist" :key="index" @tap="goinfo" :data-id="item.id">
				<view>
					<view class="limt-icon "><image :src="item.filepath"></image></view>
					<view class="limt-info">
						<view class="limt-title">{{ item.name }}</view>
						<view class="progress-box">
							<progress :percent="item.percent" show-info stroke-width="6" border-radius="4" font-size="10" backgroundColor="#ebfaf3" activeColor="#7ADBA8" />
						</view>
						<view class="limt-price">
							<view class="limt-price-view">
								<view>
									<text>￥</text>
									<text>{{ item.price_spike }}</text>
								</view>
								<view>
									<text>￥</text>
									<text style="text-decoration: line-through;">{{ item.price }}</text>
								</view>
							</view>
						</view>
						<button class="lijigoumai"  >马上抢</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var page = 1;
import { isshangjia } from '@/static/js/login.js';
import httpPath from '@/static/js/path.js';
export default {
	data() {
		return {
			role: '', //角色
			wxinfo_id: 0,
			goodslist: [],
			offtime: {},
			loadingType: 0,
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			role: '',
			noshuju:false,
			endtime: ''
		};
	},
	onPullDownRefresh() {
		page = 1;
		this.loadingType = 0;
		this.getdata();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom: function() {
		if (this.loadingType != 0) {
			//loadingType!=0;直接返回
			return false;
		}
		this.loadingType = 1;
		uni.showNavigationBarLoading(); //显示加载动画
		page++; //每触底一次 page +1
		uni.request({
			url: httpPath.filePath + '/index/killspu/index',
			method: 'POST',
			header: { 'content-type': 'application/x-www-form-urlencoded' },
			data: { page: page, wxinfo_id: this.wxinfo_id, id: this.id },
			success: res => {
				if (res.data.data.length == 0) {
					//没有数据
					this.loadingType = 2;
					uni.hideNavigationBarLoading(); //关闭加载动画
					return false;
				}
				for (let i = 0; i < res.data.data.length; i++) {
					this.goodslist.push(res.data.data.info[i]);
				}
				this.loadingType = 0; //将loadingType归0重置
				uni.hideNavigationBarLoading(); //关闭加载动画
			}
		});
	},
	onLoad(option) {
		// this.limit_time("2020/5/29 11:30:00");
		this.loadingType = 0;

		page = 1;
		let ss = uni.getStorageSync('user');
		if (ss) {
			this.wxinfo_id = ss.wxinfo_id;
		} else {
			this.wxinfo_id = 0;
		}
		this.role = isshangjia();
		this.getdata();
	},
	methods: {
		getdata() {
			uni.request({
				url: httpPath.filePath + '/index/killspu/index',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: { page: page, wxinfo_id: this.wxinfo_id },
				success: res => {
					if (res.data.code == 200) {
						if (res.data.data.length != 0) {
							this.noshuju = false;
							this.goodslist = res.data.data.info;
							if(this.goodslist.length!=0){
								for(let i=0 ;i<this.goodslist.length;i++){
									this.goodslist[i].percent=(this.goodslist[i].residue/this.goodslist[i].kill_num)*100;
									this.goodslist[i].percent=this.goodslist[i].percent.toFixed(2);
								}
							}else{
								this.noshuju = true;
							}
							
						} else {
							this.noshuju = true;
						}
						this.endtime = res.data.data.endtime;
						this.limit_time(this.endtime);
					}
				}
			});
		},
		goinfo(e) {
			uni.navigateTo({
				url: 'goodsinfo?id=' + e.currentTarget.dataset.id
			});
		},
		/**
		 * 计算结束时间
		 * @param {Object} endtime 结束时间
		 */
		limit_time(endtime) {
			if (endtime) {
				let h = '00',
					m = '00',
					s = '00';
				let currentTime = new Date();
				let cutoffTime = new Date(endtime);
				if (!(currentTime >= cutoffTime)) {
					let countTime = parseInt((cutoffTime.getTime() - currentTime.getTime()) / 1000);
					h = parseInt(countTime / 3600);
					m = parseInt((countTime % 3600) / 60);
					s = countTime % 60;
					h = h < 10 ? '0' + h : h;
					m = m < 10 ? '0' + m : m;
					s = s < 10 ? '0' + s : s;
				}
				this.offtime = { h: h, m: m, s: s };
			}
			this.Timer1(this.offtime);
		}
		/**
		 * @param {Object} endtime定时器，endtime为还剩多长时间
		 */,
		Timer1(endtime) {
			setInterval(() => {
				if (endtime) {
					if (!(endtime.h == 0 && endtime.m == 0 && endtime.s == 0)) {
						if (endtime.s > 0) {
							endtime.s--;
							endtime.s = endtime.s < 10 ? '0' + endtime.s : endtime.s;
						} else if (endtime.m > 0) {
							endtime.m--;
							endtime.m = endtime.m < 10 ? '0' + endtime.m : endtime.m;
							endtime.s = 59;
						} else if (endtime.h > 0) {
							endtime.h--;
							endtime.h = endtime.h < 10 ? '0' + endtime.h : endtime.h;
							endtime.m = 59;
							endtime.s = 59;
						}
					}
				}
			}, 1000);
		}
	}
};
</script>

<style>
page {
	background: #f9f9f9;
}
.top {
	height: 85rpx;
	background: #333;
	color: #38d180;
	line-height: 85rpx;
	box-sizing: border-box;
	padding: 0px 32rpx;
}
.limt-item > view {
	display: flex;
	align-items: flex-start;
}
.progress-box {
	margin: 12rpx 0px;
}
.limt-item {
	height: 236rpx;
	margin: 0px 32rpx 20rpx;
	border-radius: 5rpx;
	background: #fff;
	width: 686rpx;
	float: left;
}
.limt-icon {
	width: 236rpx;
	height: 236rpx;
}
.limt-icon image {
	width: 236rpx;
	height: 236rpx;
	border-radius: 5px 0px 0px 5px;
}
.limt-info {
	padding: 20rpx;
	position: relative;
	border-radius: 5rpx;
	width: 400rpx;
}
.limt-title {
	height: 66rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal !important;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 33rpx;
}
.limt-price-view view:nth-of-type(1) {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}
.limt-price-view view:nth-of-type(2) {
	font-size: 24rpx;
	color: #999999;
}
.lijigoumai {
	width: 143rpx;
	height: 60rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	color: #fff;
	position: absolute;
	bottom: 11px;
	right: 20rpx;
	background: #ffffff;
	text-align: center;
	padding: 0px;
	line-height: 60rpx;
	border: 1px solid #38d180;
	color: #38d180;
}
</style>
